<template>
  <div>
    <div class="photo">
      
    </div>
    <div class="text" :class="fixed ? 'active' :''">
      <span class="dress" @click="cityswitch">{{this.$store.state.city}}<span  class="iconfont icon-xiajiantou"></span></span>
      <span class="span1" >影院</span>
      <span class="iconfont icon-sousuo"></span>
    </div>
    <div class="box"  :style="{height: height + 'px'}">
      <div v-for="(item,index) in cinemas"  :key="index" class="cinemaList">
        <div class="Cname">{{item.name}}
          <span>￥{{item.lowPrice/100}}&nbsp;起</span>
        </div>
        <div class="Caddress">
          <p>{{item.address}}</p>
           <span>距离{{item.Distance.toFixed(2)}}km</span>
         
        </div>
      </div>
    </div>
    <router-view></router-view>
    


  </div>
</template>



<script>
// import axios from 'axios'
// import comfilmlisttopnav from '@/components/comfilmlisttopnav'
// import comloading from '@/components/comloading.vue'
import {cinemaListData} from '@/api/api';
import '@/assets/font_cmcp3orfqv/iconfont.css'
import '@/assets/font_4n235xjiiwk/iconfont.css'
import comloading from "@/components/comloading.vue";


export default {
  //组件名字
  name: "cinema",
  //接收父组件给的东西 type是接收什么东西  default 默认值
  props: {
   
    
    color: {
      type: String,
      default: "#000",
    },
  },
  //组件注册
  components: {comloading},
  // vue数据集中管理
  data() {
    return {
      cinemas:[],

      value: "1",
      //默认不吸顶
      fixed:false,
      data1: "[]",
      arr:[1,2,3],
      height:0,
      
      

      obj:{
        x:'a1',
        y:"b1",
      },
     
    };
  },
  // 方法 函数写这里
    methods:{
      
      cityswitch(){
        console.log('我进来cityswitch了');
        this.$router.push('/city')
      }
    },
  //计算属性
  computed: {},
  //侦听器
  watch: {},
  //过滤器
  filters: {
    toUpcase(value) {
      return value ? value.toUpperCase() : "";
    },
  },
  //以下是生命周期
  //组件创建之前
  beforeCreate() {},
  //组件创建之后
  created() {
    //
  },
  //页面渲染之前
  beforeMount() {},
  //页面渲染之后
 
  async mounted() {
    // window.addEventListener("scroll",(e)=>{
    //   let top=document.documentElement.scrollTop;
    //   if(top>130 ){
    //     //吸顶
    //     this.fixed=true;
    //     // var show=1;
    //     // console.log(show);

    //   }else{
    //     //还原
    //     this.fixed=false;
    //   }
      
    // })
    // true;
     console.log('进来可见高度了');
    this.height=document.documentElement.clientHeight -100;
    console.log(this.height);
    console.log('进来影院了');

    let ret=await cinemaListData(this.$store.state.cinemaid);
    this.cinemas=ret.data.data.cinemas;
    console.log(this.cinemas);
  },
  //页面销毁之前
  beforeDestroy() {},
  //页面销毁之后
  destroyed() {},
  //页面视图数据更新之前
  beforeUpdate() {},
  //页面视图数据更新之后
  updated() {},
  //组件路由守卫enter
  beforeRouteEnter(to, from, next) {
    next((vm) => {});
    // 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例
  },
  //组件路由守卫update更新
  beforeRouteUpdate(to, from, next) {
    // 同一页面，刷新不同数据时调用，
    next();
  },
  //组件路由守卫离开
  beforeRouteLeave(to, from, next) {
    // 离开当前路由页面时调用
    next();
  },
};
</script>





<style lang="scss" scoped>
// body{
//   touch-action:none;

// }


.text{
  // border-bottom: 0.5px solid #797d82;
  position: fixed;
  width: 100%;
  height: 50px;
  display: flex;
  text-align: center;
  line-height: 50px;
  background-color: #ffff;
  z-index: 1111111;
  justify-content: space-around;

  // margin-bottom: 8px;
}

.box{
  position: relative;
  top: 50px;
  z-index: 111111;
  overflow:scroll ;

}
.cinemaList{
  font-size: 15px;
 
  padding: 12px;
  background: #ffff;
}
.Cname{
  font-size: 15px;
  color: #191a1b;
  span{
    color: #ff5f16;
    float: right;
  }
}
.Caddress{
  font-size: 12px;
  color: #797d82;
}
p{
  display: inline-block;
  // display: inline;
  width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #797d82;
}
.Caddress span:nth-child(2){
  float: right;
}


</style> 
 